<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { createDonation } from '@/api/donation'

const donationForm = ref({
  type: '金额', // 默认选择金额捐赠
  amount: '',
  itemDesc: ''
})

const formRef = ref(null)
const loading = ref(false)

const rules = {
  type: [{ required: true, message: '请选择捐赠类型', trigger: 'change' }],
  amount: [
    { 
      required: true, 
      message: '请输入捐赠金额', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (donationForm.value.type === '金额') {
          if (!value) {
            callback(new Error('请输入捐赠金额'))
          } else if (isNaN(value) || value <= 0) {
            callback(new Error('请输入有效的金额'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    }
  ],
  itemDesc: [
    {
      required: true,
      message: '请输入物品描述',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (donationForm.value.type === '物品' && !value) {
          callback(new Error('请输入物品描述'))
        } else {
          callback()
        }
      }
    }
  ]
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    const res = await createDonation(donationForm.value)
    if (res.code === 200) {
      ElMessage.success('捐赠提交成功，感谢您的支持！')
      // 重置表单
      donationForm.value = {
        type: '金额',
        amount: '',
        itemDesc: ''
      }
      formRef.value.resetFields()
    } else {
      ElMessage.error(res.msg || '提交失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.msg || '提交失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="donation-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>爱心捐赠</h2>
          <p class="subtitle">您的每一份捐赠都将助力母校发展</p>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="donationForm"
        :rules="rules"
        label-width="100px"
        :disabled="loading"
      >
        <el-form-item label="捐赠类型" prop="type">
          <el-radio-group v-model="donationForm.type">
            <el-radio label="金额">金额捐赠</el-radio>
            <el-radio label="物品">物品捐赠</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item 
          v-if="donationForm.type === '金额'"
          label="捐赠金额" 
          prop="amount"
        >
          <el-input
            v-model="donationForm.amount"
            type="number"
            placeholder="请输入捐赠金额"
          >
            <template #prefix>¥</template>
          </el-input>
        </el-form-item>
        
        <el-form-item
          v-if="donationForm.type === '物品'"
          label="物品描述"
          prop="itemDesc"
        >
          <el-input
            v-model="donationForm.itemDesc"
            type="textarea"
            :rows="4"
            placeholder="请详细描述捐赠物品的名称、数量、新旧程度等信息"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleSubmit"
            :loading="loading"
          >
            提交捐赠
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.donation-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.subtitle {
  margin: 10px 0 0;
  color: #909399;
  font-size: 14px;
}

:deep(.el-input-number) {
  width: 100%;
}
</style> 